/**
 * 订单输入
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>收件订单输入</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表单填写 -->
    <h5 class="titleStyle">订单类型:</h5>
    <el-form ref="form" label-width="200px">
      <el-form-item label="订单类型" :rules="[{required:true, message:'姓名不能为空'},]">
        <el-select v-model="orderValue" placeholder="请选择订单类型" style="width:200px;">
          <el-option
            v-for="item in orderOptions"
            :key="item.orderValue"
            :label="item.label"
            :value="item.orderValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="技能要求">
        <el-select
          v-model="skillValue"
          placeholder="请选择需要的技能要求"
          :multiple="multipleType"
          style="width:600px;"
        >
          <el-option
            v-for="item in skillOptions"
            :key="item.skillValue"
            :label="item.label"
            :value="item.skillValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <h5 class="titleStyle">寄件人信息:</h5>
      <el-form :inline="true">
        <el-form-item label="姓名:" label-width="200px" :rules="[{required:true, message:'姓名不能为空'},]">
          <el-input
            v-model="orderUserName"
            type="text"
            placeholder="请输入姓名"
            maxlength="15"
            show-word-limit
            style="width:150px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话:" :rules="[
        {required:true, message:'电话不能为空'},
      ]">
          <el-input
            v-model.number="orderUserPhoneNumber"
            type="text"
            placeholder="请输入电话"
            maxlength="18"
            show-word-limit
            style="width:250px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="省市区:" :rules="[{required:true, message:'省市区不能为空'},]">
          <el-input
            v-model="orderPCR"
            type="text"
            placeholder="请输入省市区"
            maxlength="25"
            show-word-limit
            style="width:350px;"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-form-item label="详细地址:" :rules="[{required:true, message:'详细地址不能为空'},]">
        <el-input
          v-model="orderAddress"
          type="textarea"
          placeholder="请输入详细地址"
          maxlength="50"
          show-word-limit
          style="width:500px;"
        ></el-input>
      </el-form-item>

      <h5 class="titleStyle">物品信息:</h5>
      <el-form :inline="true">
        <el-form-item
          label="包裹类型:"
          label-width="200px"
          :rules="[{required:true, message:'包裹类型不能为空'},]"
        >
          <el-select v-model="parcelType" placeholder="请选择包裹类型" style="width:200px;">
            <el-option
              v-for="item in parcelOptions"
              :key="item.parcelType"
              :label="item.label"
              :value="item.parcelType"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重量:" :rules="[{required:true, message:'姓名不能为空'},]">
          <el-input
            v-model="parcelWeight"
            type="text"
            placeholder
            maxlength="4"
            style="width:150px;"
          >
            <template slot="append">kg</template>
          </el-input>
        </el-form-item>
        <el-form-item label="声明价值:">
          <el-input
            v-model="parcelValue"
            type="text"
            placeholder
            maxlength="6"
            style="width:150px;"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-form-item label="上门时间:" :rules="[{required:true, message:'姓名不能为空'},]">
        <el-date-picker type="date" placeholder="选择日期" v-model="orderDate"></el-date-picker>——
        <el-time-picker placeholder="选择时间" v-model="orderTime"></el-time-picker>
      </el-form-item>
      <div>
        <el-button type="primary" @click="onSubmit" style="margin-left:600px; float:left;">查看匹配结果</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderValue: "orderType1", //订单类型
      skillValue: "", //技能要求，array
      orderUserName: "", //姓名
      orderUserPhoneNumber: "", //电话
      orderPCR: "", //省市区
      orderAddress: "", //详细地址
      parcelType: "", //包裹类型
      parcelWeight: "", //重量
      parcelValue: "", //保价
      orderDate: "", //日期
      orderTime: "", //时间
      multipleType: true,
      orderOptions: [
        {
          orderValue: "orderType1",
          label: "收件业务"
        }
      ],
      skillOptions: [
        {
          skillValue: "skill1",
          label: "奥萃DHC商品盘点"
        },
        {
          skillValue: "skill2",
          label: "按摩椅安装"
        },
        {
          skillValue: "skill3",
          label: "按摩椅安装兜底"
        },
        {
          skillValue: "skill4",
          label: "百度千斛"
        },
        {
          skillValue: "skill5",
          label: "百度千斛1"
        },
        {
          skillValue: "skill6",
          label: "车险查勘取证"
        },
        {
          skillValue: "skill7",
          label: "丰创试点"
        },
        {
          skillValue: "skill8",
          label: "惠达陶瓷门店巡查"
        },
        {
          skillValue: "skill9",
          label: "恒源祥门店采集"
        },
        {
          skillValue: "skill10",
          label: "劲霸采集"
        },
        {
          skillValue: "skill11",
          label: "柯润补货"
        },
        {
          skillValue: "skill12",
          label: "乐凯撒业务"
        },
        {
          skillValue: "skill13",
          label: "绿源门店巡查"
        },
        {
          skillValue: "skill14",
          label: "品稽查运输"
        },
        {
          skillValue: "skill15",
          label: "师父认证"
        },
        {
          skillValue: "skill16",
          label: "SY商超信息采集"
        },
        {
          skillValue: "skill17",
          label: "十月天使门店巡查"
        },
        {
          skillValue: "skill18",
          label: "vivo信息采集"
        },
        {
          skillValue: "skill19",
          label: "网点稽查"
        },
        {
          skillValue: "skill20",
          label: "信息采集通用"
        },
        {
          skillValue: "skill21",
          label: "银联标识商店巡查（大连）"
        },
        {
          skillValue: "skill22",
          label: "易点租客户合同打印采集"
        },
        {
          skillValue: "skill23",
          label: "金牌销售"
        },
        {
          skillValue: "skill24",
          label: "银牌销售"
        },
        {
          skillValue: "skill25",
          label: "铜牌销售"
        }
      ],
      parcelOptions: [
        {
          parcelType: "parcelType1",
          label: "服装鞋帽"
        },
        {
          parcelType: "parcelType2",
          label: "个护化妆"
        },
        {
          parcelType: "parcelType3",
          label: "工业生产"
        },
        {
          parcelType: "parcelType4",
          label: "家居用品"
        },
        {
          parcelType: "parcelType5",
          label: "家用电器"
        },
        {
          parcelType: "parcelType6",
          label: "母婴用品"
        },
        {
          parcelType: "parcelType7",
          label: "3c电子"
        },
        {
          parcelType: "parcelType8",
          label: "食品"
        },
        {
          parcelType: "parcelType9",
          label: "玩具"
        },
        {
          parcelType: "parcelType10",
          label: "文件票据"
        },
        {
          parcelType: "parcelType11",
          label: "文体娱乐"
        },
        {
          parcelType: "parcelType12",
          label: "箱包"
        },
        {
          parcelType: "parcelType13",
          label: "香水彩妆"
        },
        {
          parcelType: "parcelType14",
          label: "医药保健"
        },
        {
          parcelType: "parcelType15",
          label: "钟表珠宝"
        }
      ]
    };
  },
  methods: {
    onSubmit() {
      //1.检查输入格式
      console.log(this.skillValue);
      //2.提交数据并检查返回结果
      //3.如果返回结果正常则清空（应该不用了，自动跳转清空，目前是，不保留状态）
      //4.跳转
    }
  }
};
</script>

<style scoped>
.titleStyle {
  margin-left: 100px;
}
</style>

 